﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="form.aspx.cs" Inherits="YongHu_UI.form" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
     <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
        <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" />
     <!-- Google Fonts-->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="wrapper">
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.aspx">管理</a>
            </div>

            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    
                    <!-- /.dropdown-messages -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    
                    <!-- /.dropdown-tasks -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    
                    <!-- /.dropdown-alerts -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
        </nav>
        <!--/. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">

                    <li>
                        <a href="table.aspx"><i class="fa fa-dashboard"></i> 首页</a>
                    </li>
                    <li>
                        <a href="form.aspx"><i class="fa fa-desktop"></i> 添加服装</a>
                    </li>
                    <li>
                        <a href="chart.aspx"><i class="fa fa-desktop"></i>服装图表</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div id="page-wrapper">
            <div id="page-inner">
			 <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-header">
                            <small>添加自己的服装</small>
                        </h1>
                    </div>
                </div> 
                 <!-- /. ROW  -->
              <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-5">
                                    <form role="form">
                                         <div class="form-group">
                                            <label>上传图片</label>
                                            <div id="uploadselect" class="uploadselect">
                                                 <input type="file" id="upload" class="upload" accept="image/*" />
                                             </div>
                                        </div>
                                        <div class="form-group">
                                            <label>简介</label>
                                            <asp:TextBox ID="txt_jian" runat="server" CssClass="form-control" TextMode="MultiLine" ForeColor="Black"></asp:TextBox>
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="请输入简介" ForeColor="Red" ControlToValidate="txt_jian"></asp:RequiredFieldValidator>
                                            
                                        </div>
                                        <div class="form-group">
                                            <label>服装类别</label>
                                            <asp:DropDownList ID="ddl_lei" runat="server" CssClass="form-control"></asp:DropDownList>
                                        </div>
                                        <div class="form-group">
                                            <label>服装件数</label>
                                            <asp:TextBox ID="txt_shu" runat="server" CssClass="form-control"></asp:TextBox>        
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="请输入服装件数" ForeColor="Red" ControlToValidate="txt_shu"></asp:RequiredFieldValidator>
                                            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="请输入有效数字" ControlToValidate="txt_shu" ForeColor="Red" ValidationExpression="^[0-9]*$"></asp:RegularExpressionValidator>
                                        </div>
                                        <div class="form-group">
                                            <label>售价</label>
                                            <asp:TextBox ID="txt_shou" runat="server" CssClass="form-control"></asp:TextBox>           
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="请输入售价" ForeColor="Red" ControlToValidate="txt_shou"></asp:RequiredFieldValidator>
                                            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="请输入有效数字" ControlToValidate="txt_shou" ForeColor="Red" ValidationExpression="^[0-9]+(.[0-9]{2})?$"></asp:RegularExpressionValidator>
                                        </div>
                                        <div class="form-group">
                                            <label>金额</label>
                                            <asp:TextBox ID="txt_jin" runat="server" CssClass="form-control"></asp:TextBox>                
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="请输入金额" ForeColor="Red" ControlToValidate="txt_jin"></asp:RequiredFieldValidator>
                                            <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ErrorMessage="请输入有效数字" ControlToValidate="txt_jin" ForeColor="Red" ValidationExpression="^[0-9]+(.[0-9]{2})?$"></asp:RegularExpressionValidator>
                                        </div>
                                        <asp:Button ID="Button1" runat="server" Text="添加" OnClick="Button1_Click" class="btn btn-default" />
                                    </form>
                                </div>
                                <div class="col-lg-7">
                                    <img src="images/添加2.jpg" style="height:600px" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <script src="assets/js/jquery-1.10.2.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.metisMenu.js"></script>
    <script src="assets/js/custom-scripts.js"></script>
        </div>
    </form>
</body>
    <script src="lib/lrz/dist/lrz.bundle.js"></script>
    <script>
        document.querySelector('#upload').addEventListener('change', function () {
            lrz(this.files[0], { width: 300, height: 300 })
                .then(function (rst) {
                    // 上传文件数据
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', 'yiban/ImageUploadHandler.ashx?length=' + rst.base64Len);
                    // onload请求成功获取数据成功
                    xhr.onload = function () {
                        if (xhr.status === 200) {
                            document.getElementById('BodyContent_hfAvatar').value = xhr.responseText;
                        } else {
                            alert('图片上传失败！');
                        }
                    };
                    //send[send] （森的）()方法，发送具体请求
                    xhr.send(rst.base64);
                    // 在页面中显示图片
                    var img = new Image();
                    img.src = rst.base64;
                    img.width = 100;
                    img.height = 100;
                    document.getElementById('uploadselect').parentNode.appendChild(img);
                    document.getElementById('uploadselect').remove();
                    // 返回对象
                    return rst;
                })
                .catch(function (err) {
                    console.log(err);
                    alert('图片上传失败！');
                });
        });
    </script>
</html>   
